<script setup>
import {ElContainer, ElMain, ElMessageBox} from 'element-plus';
import Head from '../components/head.vue'
import asider from '../components/aside.vue'
import {onMounted, ref} from 'vue'
import axios from "axios";
import router from "../router";
const input = ref('')
const tableData = ref([])
//存储初次加载的所有数据
const initialData=ref([])
//页面加载时查询所有信息
onMounted(async ()=>{
  //判断是否有人登录
  let data=sessionStorage.getItem('manager');
  if(data==null){//未登录就通过路径跳转直接送回登录页面
    alert("不买票就想上车？不登录你就想搞事？");
    router.push('/')
  }else{
    const response = await axios.get('/article/').then(result=>{
      if(result.data.message=="查询成功"){
        tableData.value = result.data.data
        initialData.value=result.data.data
      }else {
        alert(result.data.message);
      }
    }).catch(error=>{
      alert('请求出现问题，请稍后再试'+error);
    })
  }
})
//输入框查询
const Query = async ()=>{
  //axios方法与后端一致，@Requestparam的参数使用“params:{}”传递
  const response = await axios.get('/article/search',{params:{keyword:input.value}})
      .then(result=>{
        if(!input.value){
          alert("请输入查询内容");
          return;
        }
        if(result.data.message=="查询成功"){
          tableData.value = result.data.data
        }else {
          alert(result.data.message);
        }
      }).catch(error=>{
        alert('请求出现问题，请稍后再试'+error);
      })
}
//接收多选框选中的数据
const selectedRows = ref([]);
//保存选中的数据
const handleSelection = (val) => {
  selectedRows.value = val;
};
//删除所选内容
const Delete = async ()=> {
  try{
    if (selectedRows.value.length == 0) {
      alert("请选择要删除的账号");
      return;
    }
    //弹消息框确认删除
    const confirm = await ElMessageBox.confirm('确认删除吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true
    }).then(async () => {
      //提取需要的数据
      const idlist = selectedRows.value.map((row) => row.id)
      //axios方法与后端一致,非get方法后端使用@Requestbody接收数据
      const response = await axios({url: '/article/delete', method: 'delete', data: idlist})
          .then(result => {
            if (result.data.message.includes("删除成功")) {
              alert(result.data.message);
            } else {
              alert(result.data.message);
            }
          }).catch(error => {
            alert('请求出现问题，请稍后再试' + error);
          })
    })
  }catch (error) {
    alert(error);
  }
}
//输入框为空时，恢复初始数据
const inputChange = () => {
  if (!input.value){
    tableData.value = initialData.value;
  }
};
</script>
<template>
  <div class="common-layout" style="text-align: center;">
    <Head></Head>
    <el-container style="height: 80vh">
      <asider></asider>
      <el-main >
        <el-button type="danger" style="float: left" @click="Delete">删除</el-button>
        <el-form @keydown.enter="Query" @submit.prevent>
          <el-button type="primary" style="float: right" @click="Query">查询</el-button>
          <el-input v-model="input" style="width: 240px;float: right"
                    placeholder="输入关键字进行查询" clearable @input="inputChange"/>
        </el-form>
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelection">
          <!--多选框-->
          <el-table-column type="selection" width="60" prop="id"/>
          <el-table-column label="发帖人" prop="username" width="200" header-align="center" align="center"/>
          <el-table-column prop="content" label="内容" width="536" header-align="center" align="center" show-overflow-tooltip/>
          <el-table-column prop="time" label="发帖时间" width="390" header-align="center" align="center"/>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<style>

</style>
